<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>我的博客</title>
    <link rel="stylesheet" href="/css/normalize.css">
    <link rel="stylesheet" href="/css/fonts.css">
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/main.css">
</head>

<body>
    <div class="viewport">
        <!-- 头部 -->
        <header class="header">
            <div class="wrapper">
                <!-- 导航 -->
                <nav>
                    <a href="/">Home</a>
                    <a href="/about">关于我们</a>
                    <a href="/join">传智招聘</a>
                </nav>
                <!-- 注册/登录 -->
                <div class="extra">
                    <a href="/register">注册</a>
                    <a href="/login">登录</a>
                </div>
            </div>
        </header>
        <!-- 主体 -->
        <div class="body">
            <div class="wrapper">
                <!-- 侧边栏 -->
                <aside>
                    <!-- 广告位 -->
                    <div class="widget advert">
                        <header>赞助商</header>
                        <div class="cont">
                            <p>前端学院</p>
                            <a href="javascript:;">马上报名，即享优惠!</a>
                        </div>
                    </div>
                    <!-- 热门文章 -->
                    <div class="widget hot">
                        <header>热门文章</header>
                        <ul>
                            <li>
                                <a href="./article.html">WeUI 发布——微信官方UI库</a>
                            </li>
                            <li>
                                <a href="./article.html">Zen Coding: 一种快速编写HTML/CSS代码的方法</a>
                            </li>
                            <li>
                                <a href="./article.html">QQ浏览器X5内核问题汇总</a>
                            </li>
                            <li>
                                <a href="./article.html">一些必不可少的Sublime Text 2插件</a>
                            </li>
                            <li>
                                <a href="./article.html">高性能 CSS3 动画</a>
                            </li>
                            <li>
                                <a href="./article.html">[Task Master] gulp-lint</a>
                            </li>
                            <li>
                                <a href="./article.html">前端观察又改版</a>
                            </li>
                            <li>
                                <a href="./article.html">HTML5+CSS3 loading 效果收集</a>
                            </li>
                            <li>
                                <a href="./article.html">meta标签常用属性整理</a>
                            </li>
                            <li>
                                <a href="./article.html">HTML5 中 div section article 的区别</a>
                            </li>
                        </ul>
                    </div>
                    <!-- 执门作者 -->
                    <div class="widget authors">
                        <header>热门博主</header>
                        <ul>
                            <li>
                                <a href="./center.html">
                                    <img src="/uploads/avatar/botue.jpg" alt="">
                                    <span>老布头儿</span>
                                </a>
                            </li>
                            <li>
                                <a href="./center.html">
                                    <img src="/uploads/avatar/monkey.png" alt="">
                                    <span>程序猿</span>
                                </a>
                            </li>
                            <li>
                                <a href="./center.html">
                                    <img src="/uploads/avatar/botue.jpg" alt="">
                                    <span>老布头儿</span>
                                </a>
                            </li>
                            <li>
                                <a href="./center.html">
                                    <img src="/uploads/avatar/monkey.png" alt="">
                                    <span>程序猿</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </aside>
                <section class="main">
                    <!-- 博客文章 -->
                    <article class="post">
                        <!-- 标题 -->
                        <header class="post-title">
                            <a href="./article.html">JS the Hardcore: 执行上下文(Execution Context)</a>
                        </header>
                        <!-- 博客信息 -->
                        <div class="post-meta">
                            <img src="/uploads/avatar/botue.jpg" alt="">
                            <a href="javascript:;">老布头儿</a>
                            <span>15 February 2017</span>
                        </div>
                        <!-- 博客概览 -->
                        <div class="post-brief">
                            <p>先看个例子: console.log(a) console.log(foo()) var a = 'hello world' function foo() { console.log('foo') } 估计大部分人早就对这种问题了如指掌了，输出结果也是脱口而出</p>
                        </div>
                        <!-- 查看全文 -->
                        <a href="./article.html" class="read-more">查看全文</a>
                    </article>
                    <article class="post">
                        <!-- 标题 -->
                        <header class="post-title">
                            <a href="./article.html">weui.js发布</a>
                        </header>
                        <!-- 博客信息 -->
                        <div class="post-meta">
                            <img src="/uploads/avatar/botue.jpg" alt="">
                            <a href="javascript:;">老布头儿</a>
                            <span>15 February 2017</span>
                        </div>
                        <!-- 博客概览 -->
                        <div class="post-brief">
                            <p>weui.js 是 WeUI 的轻量级 js 封装。 嗯，没啥好介绍的，直接复制项目的 Readme.md 过来好了，欢迎去项目的 Github 项目主页 star 并贡献代码。 概述 注意：由于微信小程序不支持dom操作，所以weui.js并不适用于小程序。不过WeUI也为小程</p>
                        </div>
                        <!-- 查看全文 -->
                        <a href="./article.html" class="read-more">查看全文</a>
                    </article>
                    <article class="post">
                        <!-- 标题 -->
                        <header class="post-title">
                            <a href="./article.html">中国第三届CSS开发者大会即将召开</a>
                        </header>
                        <!-- 博客信息 -->
                        <div class="post-meta">
                            <img src="/uploads/avatar/monkey.png" alt="">
                            <a href="javascript:;">老布头儿</a>
                            <span>15 February 2017</span>
                        </div>
                        <!-- 博客概览 -->
                        <div class="post-brief">
                            <p>中国第三届CSS开发者大会将于 2016 年 12 月 17 日在广州召开，这次请来的分享嘉宾还是非常牛逼的，有不少国内外的大牛，也有我的几个同事。 感兴趣可以直接访问上面的链接了解动态和详情。 部分讲师简介 还没有勾三股四的议题，看来是要压轴啊，好期待！</p>
                        </div>
                        <!-- 查看全文 -->
                        <a href="./article.html" class="read-more">查看全文</a>
                    </article>
                    <!-- 分页 -->
                    <div class="pagination">
                        <a href="javascript:;" class="prev">← Newer Posts</a>
                        <span>Pages 2 of 146</span>
                        <a href="javascript:;" class="next">Older Posts →</a>
                    </div>
                </section>
            </div>
        </div>
        <!-- 底部 -->
        <footer class="footer">
            <div class="wrapper">
                <dl>
                    <dt>合作网站</dt>
                    <dd>
                        <a href="javascript:;">传智播客</a>
                    </dd>
                    <dd>
                        <a href="javascript:;">双元课堂</a>
                    </dd>
                    <dd>
                        <a href="javascript:;">传智学院</a>
                    </dd>
                    <dd>
                        <a href="javascript:;">博学谷在线教育平台</a>
                    </dd>
                </dl>
                <dl>
                    <dt>友情链接</dt>
                    <dd>
                        <a href="javascript:;">Swift Note GaoWhen高H温</a>
                    </dd>
                    <dd>
                        <a href="javascript:;">大猫の意淫网志 裁纸刀下</a>
                    </dd>
                    <dd>
                        <a href="javascript:;">Smallni's blog 米随随s5s5</a>
                    </dd>
                    <dd>
                        <a href="javascript:;">芒果 软件开发网 觉唯前端</a>
                    </dd>
                    <dd>
                        <a href="javascript:;">JSER CSS HOUSE Time Machine</a>
                    </dd>
                    <dd>
                        <a href="javascript:;">前端博客导航 WEB前端开发</a>
                    </dd>
                </dl>
                <dl>
                    <dt>关注我的微信</dt>
                    <dd>
                        <img class="qrcode" src="/images/qrcode.jpg" alt="">
                    </dd>
                </dl>
            </div>
        </footer>
    </div>
</body>

</html>